<template>
  <div class="content-wrapper">
    <!-- <div class="content-header">分享我的</div> -->
    <div class="content-container">
      <div v-if="multipleSelection.length > 0" class="filter-container">
        <span class="filter-item filter-item-label">批量操作 </span>
        <el-button size="mini" round class="filter-item" @click="deleteAll"
          >删除<i
            class="el-icon-delete el-icon--right button-icon danger-color"
        /></el-button>
      </div>
      <div>
        <el-form :inline="true" :model="listQuery" class="filter-container">
          <el-form-item label="分享目标">
            <el-radio-group v-model="listQuery.radio">
              <el-select
                size="mini"
                v-model="listQuery.shareTargetType"
                placeholder="请选择个人/部门"
              >
                <el-option
                  v-for="item in shareTargetTypeList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="listQuery.shareTargetType == 0">
            <el-tag
              v-for="(tag, index) in dataList"
              :key="index"
              :disable-transitions="false"
              class="tag"
            >
              {{ tag.userName }}
            </el-tag>
            <el-button
              size="mini"
              round
              circle
              icon="el-icon-plus"
              @click="dialogVisibles"
            />
            <SearchPersonnel
              :SearchPersonnelData="SearchPersonnelData"
              v-on:dataListData="dataListData"
            ></SearchPersonnel>
          </el-form-item>
          <el-form-item v-if="listQuery.shareTargetType == 1">
            <SelectGroup
              v-on:receiveUserGroupData="receiveUserGroupData"
            ></SelectGroup>
          </el-form-item>
          <el-form-item label="分享状态">
            <el-select
              v-model="listQuery.status"
              placeholder="请选择文档状态"
              size="mini"
            >
              <el-option
                v-for="item in statusList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分享类型">
            <el-select
              v-model="listQuery.shareType"
              placeholder="请选择文件类型"
              size="mini"
            >
              <el-option
                v-for="item in shareTypeList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              class="filter-item"
              size="small"
              round
              type="primary"
              icon="el-icon-search"
              @click="getList"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          height="500"
          v-loading="listLoading"
          :data="pageList"
          highlight-current-row
          style="width: 100%"
        >
          <!--          <el-table-column type="selection" width="55" fixed />-->
          <el-table-column label="文档名称" min-width="200">
            <template slot-scope="scope">
              <svg class="icon" aria-hidden="true">
                <use
                  :xlink:href="iconType(scope.row.shareFileExtension).class"
                ></use>
              </svg>
              <span style="cursor: pointer" @click="viewDocument(scope.row)"
                >{{ scope.row.shareFileName
                }}{{ scope.row.shareFileExtension }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="分享来源"
            prop="createUserName"
            width="160px"
          />
          <el-table-column
            label="分享时间"
            prop="accessTimeString"
            width="160px"
          />
          <el-table-column label="分享状态" prop="status" width="160px">
            <template scope="{row}">
              <el-tag v-if="row.status == 1 || row.status == 2" type="success"
                >有效</el-tag
              >
              <el-tag v-else type="danger">失效</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="文件状态" prop="status" width="160px">
            <template scope="{row}">
              <el-tag v-if="!row.documentNotExist" type="success">正常</el-tag>
              <el-tag v-else type="danger">已删除</el-tag>
            </template>
          </el-table-column>
          <!--          <el-table-column label="操作" align="center" width="150px" fixed="right">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button size="mini" type="danger" @click="">取消分享</el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script>
import { unity } from '@/styles/js/setIconType.js'
import { page } from '@/api/xd/share_to'

import Pagination from '@/components/Pagination'
import SearchPersonnel from '@/components/SearchUser/SearchPersonnel.vue'
import SelectGroup from '@/components/SelectGroup/SelectUserGroups '
import { relDelete } from '@/api/fd/document.js'

export default {
  components: {
    Pagination,
    SearchPersonnel,
    SelectGroup
  },
  data() {
    return {
      iconType: unity.setIconType,
      statusData: { 0: '取消', 1: '永久有效', 2: '限时有效', 3: '失效' },
      statusList: [
        { key: 0, value: '取消' },
        { key: 1, value: '永久有效' },
        { key: 2, value: '限时有效' },
        { key: 3, value: '失效' }
      ],
      shareTypeList: [
        { key: 0, value: '文档' },
        { key: 1, value: '文件夹' },
        { key: 2, value: '知识库' }
      ],
      shareTargetTypeList: [
        { key: 0, value: '个人' },
        { key: 1, value: '部门' }
      ],
      multipleSelection: [],
      listLoading: false,
      pageList: [],
      listQuery: {
        shareDirection: 1,
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10
      },
      total: 0,
      receiveUserName: '',
      groupDialogReview: false,
      SelectPersonnelData: {},
      SelectUserGroupData: {},
      SearchPersonnelData: {},
      dataList: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    viewDocument(row, event, column) {
      // 分享源文件被删除
      if (row.documentNotExist) {
        this.$message.info('当前分享的源数据已经被删除')
        relDelete({
          documentShareId: row.documentShareId
        }).then(() => {
          this.getList()
        })
        return
      }
      if (row.status == 0) {
        this.$message.info('当前分享已经被取消')
        return
      }
      if (row.status == 3) {
        this.$message.info('当前分享已经失效')
        return
      }
      if (row.shareFileExtension) {
        window.open(
          'onlyoffice/createDocument.html?&token=' +
            this.$store.getters.token +
            '&documentId=' +
            row.shareId +
            '&mode=view' +
            '&urldata=' +
            process.env.VUE_APP_BASE_API
        )
      } else {
        this.$router.push({
          path: '/document/file/' + row.repositoryId,
          query: { repositoryName: row.shareFileName, row: row }
        })
      }
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    getList() {
      this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      page(this.listQuery).then((res) => {
        if (res.code == 1) {
          this.pageList = res.data.rows
          this.total = res.data.total
          this.listLoading = false
        }
      })
    },
    // 个人
    dialogVisibles() {
      this.SearchPersonnelData = {
        dialogVisible: true
      }
    },
    dataListData(data) {
      if (data != '') {
        this.dataList = data
        this.listQuery.id = data[0].id
      }
    },
    // 部门
    receiveUserGroupData(data) {
      this.listQuery.id = data[0].id
      this.receiveUserName = data.receiveUserName
    }
  }
}
</script>
